<style>
    .margin_L30 {
        margin-left: 30px;
    }
</style>
<div id="comment_flat">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">评论列表</h3>
        </div>
        <div class="panel-body">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                {% for comment_data in comment_data_list %}
                    <div class="panel">
                        <div class="panel-heading" role="tab" id="headingOne">
                            <h6 class="panel-title">
                                #{{ forloop.counter }}楼&nbsp;
                                {{ comment_data.0.create_time|date:'Y-m-d H:i:s' }}&nbsp;
                                <a href="{% url 'blog:site' comment_data.0.user.username %}">{{ comment_data.0.user.username }}</a>
                                <p class="pull-right opacity50"><a class="btn_reply" href="#input_comment"
                                                                   reply_user="{{ comment_data.0.user.username }}"
                                                                   parent_id="{{ comment_data.0.id }}">回复</a>
                                </p>
                                <p class="margin_L30">
                                    {{ comment_data.0.content }}
                                </p>  <!-- 主评论内容 -->
                                {% if comment_data.1.count %}
                                    <a class="collapsed pull-right opacity50" role="button" data-toggle="collapse"
                                       data-parent="#accordion"
                                       href="#comment_collapse_{{ comment_data.0.pk }}"
                                       aria-expanded="false" aria-controls="comment_collapse_{{ comment_data.0.pk }}">
                                        其他评论【{{ comment_data.1.count }}】
                                    </a>
                                {% endif %}
                            </h6>
                        </div>
                        <div id="comment_collapse_{{ comment_data.0.pk }}" class="panel-collapse collapse"
                             role="tabpanel"
                             aria-labelledby="headingOne">
                            <div class="panel-body">
                                <div class="media-body">
                                    {% if comment_data.1.exists %}
                                        {% for child_comment in comment_data.1 %}
                                            <p class="margin_L30">
                                                {{ child_comment.create_time|date:'Y-m-d H:i:s' }}&nbsp;
                                                <a href="{% url 'blog:site'  child_comment.user.username %}">{{ child_comment.user.username }}</a>
                                            {% if child_comment.user.username == comment_data.0.user.username %}
                                            	【楼主】
                                            {% endif %}
                                            </p>
                                            <p class="pull-right opacity50"><a class="btn_reply" href="#input_comment"
                                                                               reply_user="{{ child_comment.user.username }}"
                                                                               parent_id="{{ comment_data.0.id }}">回复</a>
                                            </p>
                                            <p class="margin_L30">{{ child_comment.content }}</p>  <!-- 子评论内容 -->
                                            <hr>
                                        {% endfor %}
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">发表评论</h3>
        </div>
        <div class="panel-body">
            <form>
                {% csrf_token %}
                <label for="input_comment">评论</label>
                <textarea name="comment" id="input_comment" class="form-control" style="height: 150px"></textarea>
                <br>
                <input type="button" class="btn btn-block btn-success" id="btn_comment" value="提交">
            </form>
        </div>
    </div>
</div>
<script>
    // 提前声明一个主评论id，如果有主评论，那么设置值，如果没有默认就是null
    let parentId = null
    $(document).ready(
        $('#btn_comment').click(function () {
            let content = $('#input_comment').val();
            $.ajax({
                url: '{% url 'article:comment' %}',
                type: 'post',
                data: {
                    'article_id':{{ article_now.pk }},
                    'content': content,
                    // 将主评论id带入到ajax数据中
                    'parent_id': parentId,
                    'csrfmiddlewaretoken': '{{ csrf_token }}'
                },
                success: function (res) {
                    if (res.code === 200) {
                        alert(res.msg);
                        // 局部刷新评论区
                        {#$('#comment_flat').load(location.href + ' #comment_flat');#}
                        // 局部刷新不能多次提交，直接整个页面刷新
                        location.reload()
                    }
                }
            })
        }),
        $('.btn_reply').click(function () {
            let reply_user = $(this).attr('reply_user');
            let parent_id = $(this).attr('parent_Id');
            $('#input_comment').text('@' + reply_user + '\n');
            // 回复时设置主评论id
            parentId = parent_id
        })
    )
</script>